<template>
  <basic-container>
    <el-form label-width="100px" :inline="true" :rules="rules" @submit.native.prevent>
      <el-form-item label="工单号:" prop="workOrderNo">
        <el-input ref="workOrderNoProperties" v-model="workOrderNo" @keyup.enter.native="onSubmit">
          <el-button slot="append" icon="el-icon-search" @click="openWorkOrderNoModal"></el-button>
        </el-input>
      </el-form-item>
      <div style="margin-left: 3%; display: inline-block">
        <el-button type="primary" size="small" icon="el-icon-search" @click="onSubmit">查询</el-button>
        <el-button size="small" @click="clear" icon="el-icon-delete">清空</el-button>
      </div>
    </el-form>

    <el-divider>基础信息</el-divider>
    <div id="workOrderInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleMenu('isShowWorkOrderInfo')">
          <h4>工单信息</h4>
          <i :class="[isShowWorkOrderInfo ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <!-- <span>共{{ workOrderInfoData.length }}条记录</span> -->
    </div>
    <transition name="workOrderProgress">
      <avue-crud v-show="isShowWorkOrderInfo" :option="workOrderInfoOption" :data="workOrderInfoData" ref="workOrderInfo">
        <template slot-scope="{ row }" slot="statusValue">
          <span v-if="row.statusValue == '待派工'" class="stateWords-warning">待派工</span>
          <span v-if="row.statusValue == '已撤回'" class="stateWords-success">已撤回</span>
          <span v-if="row.statusValue == '待生产'" class="stateWords-primary">待生产</span>
          <span v-if="row.statusValue == '生产中'" class="stateWords-default">生产中</span>
          <span v-if="row.statusValue == '完工'" class="stateWords-success">完工</span>
          <span v-if="row.statusValue == '锁定'" class="stateWords-danger">锁定</span>
        </template>
      </avue-crud>
    </transition>

    <div id="productInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleMenu('isShowProductInfo')">
          <h4>产品信息</h4>
          <i :class="[isShowProductInfo ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ page.total }}条记录</span>
    </div>
    <transition name="workOrderProgress">
      <avue-crud
        v-show="isShowProductInfo"
        :option="productInfoOption"
        :page.sync="page"
        :data="productInfoData"
        ref="productInfo"
        @current-change="currentChange"
        @on-load="onLoad"
        @size-change="sizeChange"
      >
        <template slot="menuLeft">
          <el-button type="warning" size="small" icon="el-icon-download" @click="handleExport">导出</el-button>
        </template>
        <template slot-scope="{ row }" slot="statusValue">
          <span v-if="row.statusValue == '生产中'" class="stateWords-warning">生产中</span>
          <span v-if="row.statusValue == '完成'" class="stateWords-success">完成</span>
          <span v-if="row.statusValue == '包装'" class="stateWords-primary">包装</span>
          <span v-if="row.statusValue == '入库'" class="stateWords-default">入库</span>
          <span v-if="row.statusValue == '报废'" class="stateWords-danger">报废</span>
          <span v-if="row.statusValue == '扣住'" class="stateWords-danger">扣住</span>
          <span v-if="row.statusValue == '维修'" class="stateWords-success">维修</span>
          <span v-if="row.statusValue == '发货'" class="stateWords-success">发货</span>
          <span v-if="row.statusValue == '锁定'" class="stateWords-warning">锁定</span>
        </template>
      </avue-crud>
    </transition>

    <el-divider>物料信息</el-divider>
    <div id="pickingInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleMenu('isShowPickingInfo')">
          <h4>领料信息</h4>
          <i :class="[isShowPickingInfo ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ pickingInfoData.length }}条记录</span>
    </div>
    <transition name="workOrderProgress">
      <avue-crud v-show="isShowPickingInfo" :option="pickingInfoOption" :data="pickingInfoData" ref="pickingInfo">
        <template slot-scope="{ row }" slot="isMaterial">
          <el-tag>{{ row.isMaterial ? '是' : '否' }}</el-tag>
        </template>
      </avue-crud>
    </transition>

    <div id="feedingInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleMenu('isShowFeedingInfo')">
          <h4>工单上料信息</h4>
          <i :class="[isShowFeedingInfo ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ feedingInfoData.length }}条记录</span>
    </div>
    <transition name="workOrderProgress">
      <avue-crud v-show="isShowFeedingInfo" :option="feedingInfoOption" :data="feedingInfoData" ref="feedingInfo"> </avue-crud>
    </transition>

    <div id="smtFeedingInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleMenu('isShowSmtFeedingInfo')">
          <h4>SMT站位表上料</h4>
          <i :class="[isShowSmtFeedingInfo ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ smtPage.total }}条记录</span>
    </div>
    <transition name="workOrderProgress">
      <avue-crud
        :page.sync="smtPage"
        v-show="isShowSmtFeedingInfo"
        :option="smtFeedingInfoOption"
        :data="smtFeedingInfoData"
        ref="smtFeedingInfo"
        @current-change="smtCurrentChange"
        @on-load="onSmtLoad"
        @size-change="smtSizeChange"
      >
        <template slot="menuLeft">
          <el-button type="warning" size="small" icon="el-icon-download" @click="handleSmtExport">导出</el-button>
        </template>
      </avue-crud>
    </transition>

    <el-divider>生产信息</el-divider>
    <div id="passingStationInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleMenu('isShowPassingStationInfo')">
          <h4>过站信息</h4>
          <i :class="[isShowPassingStationInfo ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ stationPage.total }}条记录</span>
    </div>
    <transition name="workOrderProgress">
      <avue-crud
        v-show="isShowPassingStationInfo"
        @on-load="onStationInfoLoad"
        :page.sync="stationPage"
        @size-change="stationSizeChange"
        @current-change="stationCurrentChange"
        :option="passingStationInfoOption"
        :data="passingStationInfoData"
        ref="passingStationInfo"
      >
        <!-- <template slot-scope="{}" slot="menu">
        <el-button icon="el-icon-view" size="small" type="text">查看</el-button>
      </template> -->
      </avue-crud>
    </transition>

    <el-divider>发货信息</el-divider>
    <div id="deliverGoodsInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleMenu('isShowDeliverGoodsInfo')">
          <h4>发货信息</h4>
          <i :class="[isShowDeliverGoodsInfo ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ deliverGoodsInfoData.length }}条记录</span>
    </div>
    <transition name="workOrderProgress">
      <avue-crud
        v-show="isShowDeliverGoodsInfo"
        @on-load="onDeliverGoodsInfoLoad"
        :option="deliverGoodsInfoOption"
        :data="deliverGoodsInfoData"
        :page.sync="deliverPage"
        @size-change="deliverSizeChange"
        @current-change="deliverCurrentChange"
        ref="deliverGoodsInfo"
      >
        <template slot-scope="{ row }" slot="menu">
          <el-button icon="el-icon-view" size="small" type="text" @click="deliverGoodsInfoDetail(row)">查看发货单</el-button>
        </template>
      </avue-crud>
    </transition>

    <el-dialog append-to-body title="发货信息" :visible.sync="isShowDeliverGoodsInfoDetail" width="60%">
      <avue-form v-model="deliverGoodsInfoForm" :option="deliverGoodsInfoDetailOption"></avue-form>
      <avue-crud :option="deliverGoodsListOption" :data="deliverGoodsList"></avue-crud>
    </el-dialog>

    <!-- <el-card class="box-card-hide" v-if="!showDirectory">
      <div slot="header" class="clearfix">
        <el-tooltip style="float: right; padding: 3px 3px; cursor: pointer" class="item" effect="dark" content="展示目录" placement="bottom">
          <i @click="showDirectory = true" class="el-icon-arrow-left"></i>
        </el-tooltip>
      </div>
    </el-card> -->
    <div v-if="!showDirectory" class="box-card-hide" @click="showDirectory = true">
      <i class="el-icon-arrow-left"></i>
    </div>
    <el-card class="box-card" v-if="showDirectory">
      <div slot="header" class="clearfix">
        <span>目录</span>
        <el-tooltip style="float: right; padding: 3px 3px; cursor: pointer" class="item" effect="dark" content="收起目录" placement="bottom">
          <i @click="showDirectory = false" class="el-icon-arrow-right"></i>
        </el-tooltip>
      </div>
      <div class="catalogue">
        基础信息
        <ul>
          <li @click="goToLocation('#workOrderInfo')">工单信息</li>
          <li @click="goToLocation('#productInfo')">产品信息</li>
        </ul>
        物料信息
        <ul>
          <li @click="goToLocation('#pickingInfo')">领料信息</li>
          <li @click="goToLocation('#feedingInfo')">工单上料信息</li>
          <li @click="goToLocation('#smtFeedingInfo')">SMT站位表上料</li>
        </ul>
        生产信息
        <ul>
          <li @click="goToLocation('#passingStationInfo')">过站信息</li>
        </ul>

        发货信息
        <ul>
          <li @click="goToLocation('#deliverGoodsInfo')">发货信息</li>
        </ul>
      </div>
    </el-card>
    <common-modal-template ref="commonModalTemplate" :option="tableOption" @getSelectedRows="getSelectedRows"> </common-modal-template>
    <export-comp
      ref="productinfoComp"
      page-api-url="mes-product/product/list"
      :option="productInfoOption"
      :query="{ workOrderNo: this.workOrderNo }"
      :page="page"
      file-name="工单进度-产品信息"
    >
    </export-comp>
    <!--      <export-excel-->
    <!--      :visible="exprotVisible"-->
    <!--      :loading="loading"-->
    <!--      :option="productInfoOption"-->
    <!--      :page="page"-->
    <!--      :data="exportData"-->
    <!--      name="产品信息"-->
    <!--      @selectData="handleSelectData"-->
    <!--      @close="handleClose"-->
    <!--    >-->
    <!--    <export-excel-->
    <!--      :visible="smtExportVisible"-->
    <!--      :loading="loading"-->
    <!--      :option="smtFeedingInfoOption"-->
    <!--      :page="smtPage"-->
    <!--      :data="smtExportData"-->
    <!--      name="smt站位表上料"-->
    <!--      @selectData="handleSmtSelectData"-->
    <!--      @close="handleSmtClose"-->
    <!--    >-->
    <!--    </export-excel>-->

    <export-comp
      ref="smtinfoComp"
      page-api-url="mes-product/feeding/list"
      :option="smtFeedingInfoOption"
      :query="{ workOrderId: workOrderId }"
      :page="smtPage"
      file-name="工单进度-smt站位表上料"
    >
    </export-comp>
  </basic-container>
</template>
<script>
import {
  getWorkOrderList,
  getShipListByWorkOrderNo,
  getPickingListByWorkOrderNo,
  getProductByWorkOrderNoList,
  getStationInfoByWorkOrderNoList,
  getFeedListByWorkOrderNo,
  getSmtFeedListByWorkOrderNo,
  getOverStationInfo,
  getDeliveryInfo
} from '@/api/product/workOrderProgress';
// import exportExcel from '@/components/export-excel';
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';
import exportComp from '@/components/export-comp';
export default {
  components: {
    CommonModalTemplate,
    // exportExcel,
    exportComp
  },
  data() {
    return {
      isShowWorkOrderInfo: true,
      isShowProductInfo: true,
      isShowPickingInfo: false,
      isShowFeedingInfo: false,
      isShowPassingStationInfo: false,
      isShowDeliverGoodsInfo: false,
      isShowSmtFeedingInfo: false,
      exprotVisible: false,
      smtExportVisible: false,
      exportData: [],
      smtExportData: [],
      loading: false,
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      stationPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      smtPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      catalogue: true,
      showDirectory: true,
      workOrderNo: '',
      rules: {
        workOrderNo: [
          {
            required: true,
            trigger: 'submit',
            validator: (rule, value, callback) => {
              callback();
            }
          }
        ]
      },
      workOrderInfoData: [], //工单信息
      workOrderInfoOption: {
        //工单信息表格配置
        height: 250,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: true,
        menu: false,
        indexLabel: '序号',
        column: [
          {
            label: '工单号',
            prop: 'workOrderNo'
          },
          {
            label: '工单类型',
            prop: 'orderType',
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=order_type',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            }
            // 1:一般工单，2:委外工单，3:生产补单，4:模具工单，5:样品工单，6:重工改制 7. 虚拟工单组 9：返工工单
          },
          {
            label: '状态',
            prop: 'statusValue',
            slot: true
          },
          {
            label: '产品编码',
            prop: 'partNo'
          },
          {
            label: '产品名称',
            prop: 'partName'
          },
          {
            label: '产品型号',
            prop: 'partModel'
          },
          {
            label: '工单计划数量',
            prop: 'erpPlanQuantity'
          },
          {
            label: '工单生产数量',
            prop: 'quantity'
          },
          {
            label: '车间',
            prop: 'workshopName'
          },
          {
            label: '产线',
            prop: 'lineName'
          },
          {
            label: '生产订单',
            prop: 'productionOrderNo'
          }
        ]
      },
      productInfoData: [], //产品信息
      productInfoOption: {
        //产品信息表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: true,
        menu: false,
        indexLabel: '序号',
        searchMenuSpan: 4,
        column: [
          {
            label: '序列号',
            prop: 'sequenceNumber'
          },
          {
            label: '产品数量',
            prop: 'packingSpecification'
          },
          {
            label: '过站载具',
            prop: 'carrierSn'
          },
          {
            label: '当前工序',
            prop: 'currRouteName'
          },
          {
            label: '工序类型',
            prop: 'currRouteType',
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=station_type',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            rules: [
              {
                required: true,
                message: '请输入工序类型',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '状态',
            prop: 'statusValue',
            slot: true
          },
          {
            label: '下一工序',
            prop: 'nextRouteName'
          }
        ]
      },
      feedingInfoData: [], //上料信息
      feedingInfoOption: {
        //上料信息表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: true,
        menu: false,
        indexLabel: '序号',
        menuWidth: 100,
        column: [
          {
            label: '包装条码',
            prop: 'packNo'
          },
          {
            label: '包装数量',
            prop: 'quantity'
          },
          {
            label: '物料批次',
            prop: 'lotNo'
          },
          {
            label: '物料编码',
            prop: 'partNo'
          },
          {
            label: '物料名称',
            prop: 'partName'
          },
          {
            label: '上料人',
            prop: 'onlineFeedBy'
          },
          {
            label: '用料工序',
            prop: 'routeName'
          },
          {
            label: '用料工位',
            prop: 'stationName'
          },
          {
            label: '上料时间',
            prop: 'onlineFeedDate'
          }
        ]
      },
      smtFeedingInfoData: [{}], //smt上料
      smtFeedingInfoOption: {
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        indexLabel: '序号',
        menuWidth: 100,
        column: [
          // {
          //   label: '生产工单',
          //   prop: 'workOrderNo'
          // },
          {
            label: '产品编码',
            prop: 'productNo'
          },
          {
            label: '产品名称',
            prop: 'productName'
          },
          {
            label: '工单计划数量',
            prop: 'planQuantity'
          },
          {
            label: '站位表编码',
            prop: 'tableCode'
          },
          {
            label: '贴片程序名',
            prop: 'tableName'
          },
          {
            label: '机台',
            prop: 'machineCode'
          },
          {
            label: '站号',
            prop: 'trackNo'
          },
          {
            label: '飞达',
            prop: 'feederCode'
          },
          {
            label: '位号',
            prop: 'positionNo'
          },
          {
            label: '用量',
            prop: 'quantity'
          },
          {
            label: '上料的物料编码',
            prop: 'partNo'
          },
          {
            label: '上料的物料名称',
            prop: 'partName'
          },
          {
            label: '上料的包装条码',
            prop: 'packNo'
          },
          {
            label: '上料的包装数量',
            prop: 'packageQuantity'
          },
          {
            label: '上料的物料批次',
            prop: 'lotNo'
          },
          {
            label: '上料人',
            prop: 'offlineFeedName'
          },
          {
            label: '上料时间',
            prop: 'offlineFeedDate',
            type: 'time'
          },
          {
            label: '扣料数量',
            prop: 'usedQuantity'
          }
        ]
      }, //smt上料
      pickingInfoData: [], //领料信息
      pickingInfoOption: {
        //领料信息表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: true,
        menu: false,
        indexLabel: '序号',
        menuWidth: 100,
        column: [
          {
            label: '领料单号',
            prop: 'sheetNo'
          },
          {
            label: '物料编码',
            prop: 'partMasterCode'
          },
          {
            label: '物料名称',
            prop: 'partMasterName'
          },
          {
            label: '包装条码',
            prop: 'sequenceNumber'
          },
          {
            label: '包装数量',
            prop: 'sequenceQuantity'
          },
          {
            label: '物料批次',
            prop: 'lotNo'
          },
          {
            label: '领料时间',
            prop: 'eventDate'
          },
          {
            label: '是否上料',
            prop: 'isMaterial'
          }
        ]
      },
      passingStationInfoData: [], //过站信息
      passingStationInfoOption: {
        //过站信息表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: true,
        menu: false,
        indexLabel: '序号',
        menuWidth: 100,
        column: [
          {
            label: '工序名称',
            prop: 'routeName'
          },
          {
            label: '工序类型',
            prop: 'routeType',
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=station_type',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            }
          },
          {
            label: '已过站数量',
            prop: 'passQuantity'
          },
          {
            label: '未过站数量',
            prop: 'waitingQuantity'
          },
          {
            label: '不良登记数量',
            prop: 'ngQuantity'
          },
          {
            label: '产线',
            prop: 'lineName'
          },
          {
            label: '工位',
            prop: 'stationName'
          },
          {
            label: '设备',
            prop: 'equipments'
          },
          {
            label: '过站人员',
            prop: 'operator'
          }
          // {
          //   label: '最后过站时间',
          //   prop: 'lastOverStationTime'
          // }
        ]
      },

      modalTitle: '',
      deliverGoodsInfoData: [], //发货信息
      deliverGoodsInfoOption: {
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: true,
        indexLabel: '序号',
        menu: false,
        column: [
          {
            label: '包装条码',
            prop: 'packNumber'
          },
          {
            label: '包装数量',
            prop: 'packQuantity'
          },
          {
            label: '包规数量',
            prop: 'packQuantitySpec'
          },
          {
            label: '发货单号',
            prop: 'sheetNo'
          },
          {
            label: '客户代码',
            prop: 'code'
          },
          {
            label: '客户名称',
            prop: 'partner'
          },
          {
            label: '发货地址',
            prop: 'locAddress'
          },
          {
            label: '发货日期',
            prop: 'deliveryDate'
          },
          {
            label: '发货操作人',
            prop: 'consignor'
          }
        ]
      },
      deliverPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      isShowDeliverGoodsInfoDetail: false, //是否显示发货信息详情
      deliverGoodsInfoForm: {},
      deliverGoodsInfoDetailOption: {
        //发货信息详情
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 100,
        column: [
          {
            label: '发货单号',
            prop: 'sheetNo',
            disabled: false
          },
          {
            label: '客户名称',
            prop: 'partner',
            disabled: false
          },
          {
            label: '发货人员',
            prop: 'consignor',
            disabled: false
          },
          {
            label: '发货时间',
            prop: 'deliveryDate',
            disabled: false
          }
        ]
      },
      deliverGoodsListOption: {
        //发货详情表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: true,
        indexLabel: '序号',
        menu: false,
        column: [
          {
            label: '产品编码',
            prop: 'productNo'
          },
          {
            label: '产品名称',
            prop: 'productName'
          },
          {
            label: '产品规格',
            prop: 'productModel'
          },
          {
            label: '客户料号',
            prop: 'partner'
          },
          {
            label: '单位',
            prop: 'uom'
          },
          {
            label: '需求数量',
            prop: 'requiredQuantity'
          },
          {
            label: '已出库数量',
            prop: 'issuedQuantity'
          },
          {
            label: '备注',
            prop: 'remark'
          }
        ]
      },
      tableOption: {
        modalTitle: '选择工单号（双击进行选择）',
        url: '/api/mes-product/work-order/page',
        isPage: true,
        rowSelectionType: 'single',
        columnDefs: [
          {
            label: '生产订单',
            prop: 'productionOrderNo',
            search: true
          },
          {
            label: '生产工单',
            prop: 'orderNo',
            search: true
          },
          {
            label: '工单类型',
            prop: 'orderType',
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=order_type',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            }
          },
          {
            label: '工单数量',
            prop: 'planQuantity'
          },
          {
            label: '产品编码',
            prop: 'partNo'
          },
          {
            label: '产品名称',
            prop: 'partName'
          },
          {
            label: 'BOM版本',
            prop: 'bomVersion'
          },
          {
            label: '派工产线',
            prop: 'productionLineName'
          },
          {
            label: '计划开始时间',
            prop: 'planStartDate'
          },
          {
            label: '计划结束时间',
            prop: 'planEndDate'
          },
          {
            label: '制定人',
            prop: 'creatorName'
          },
          {
            label: '状态',
            prop: 'status',
            type: 'select',
            dicData: [
              {
                label: '待排程',
                value: 1
              },
              {
                label: '待生产',
                value: 2
              },
              {
                label: '生产中',
                value: 3
              },
              {
                label: '完工',
                value: 4
              },
              {
                label: '锁定',
                value: 5
              },
              {
                label: '强制完工',
                value: 6
              }
            ]
          }
        ]
      } //公用模态框配置信息
    };
  },
  mounted() {
    if (this.$route.query.workOrderNo) {
      this.workOrderNo = this.$route.query.workOrderNo;
      this.onSubmit();
    }
  },
  computed: {
    workOrderId() {
      if (this.workOrderInfoData.length) {
        return this.workOrderInfoData[0].workOrderId;
      } else {
        return '';
      }
    }
  },
  methods: {
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    stationCurrentChange(currentPage) {
      this.stationPage.currentPage = currentPage;
    },
    stationSizeChange(pageSize) {
      this.stationPage.pageSize = pageSize;
    },
    handleSelectData(val) {
      let current = 1;
      let pageSize = this.page.pageSize;
      if (val === 'all') {
        // 接口返回上限500条数据
        pageSize = 500;
      } else {
        current = this.page.currentPage;
      }
      const page = {
        current,
        pageSize
      };
      this.onLoad(page);
    },
    handleExport() {
      if (!this.workOrderNo) {
        this.$message.warning('请先选择工单号');
        return;
      }
      this.$refs.productinfoComp.visible = true;
    },
    handleSmtSelectData(val) {
      let current = 1;
      let pageSize = this.smtPage.pageSize;
      if (val === 'all') {
        // 接口返回上限500条数据
        pageSize = 10000;
      } else {
        current = this.smtPage.currentPage;
      }
      const page = {
        current,
        pageSize
      };
      this.onSmtLoad(page);
    },
    handleSmtExport() {
      if (!this.workOrderNo) {
        this.$message.warning('请先选择工单号');
        return;
      }
      this.$refs.smtinfoComp.visible = true;
    },
    handleSmtClose(val) {
      this.smtExportVisible = false;
      this.smtFeedingInfoData = this.smtExportData.splice(0, this.page.pageSize);
    },
    handleClose(val) {
      this.exprotVisible = false;
      this.productInfoData = this.exportData.splice(0, this.page.pageSize);
    },
    //产品信息进行分页
    onLoad(page) {
      if (this.workOrderNo) {
        this.loading = true;
        getProductByWorkOrderNoList(page.currentPage, page.pageSize, Object.assign({ workOrderNo: this.workOrderNo, workOrderId: this.workOrderInfoData[0].workOrderId }))
          .then((res) => {
            const data = res.data.data;
            this.page.total = data.total;
            this.productInfoData = data.records;
            this.exportData = data.records;
          })
          .finally(() => {
            this.loading = false;
          });
      } else {
        this.productInfoData = [];
      }
    },
    //smt上料分页
    onSmtLoad(page, params = {}) {
      if (this.workOrderNo) {
        this.loading = true;
        getSmtFeedListByWorkOrderNo(page.currentPage, page.pageSize, { workOrderId: this.workOrderInfoData[0].workOrderId })
          .then((res) => {
            const data = res.data.data;
            this.smtPage.total = data.total;
            this.smtFeedingInfoData = data.records;
            this.smtExportData = data.records;
          })
          .finally(() => {
            this.loading = false;
          });
      } else {
        this.smtFeedingInfoData = [];
      }
    },
    smtCurrentChange(currentPage) {
      this.smtPage.currentPage = currentPage;
    },
    smtSizeChange(pageSize) {
      this.smtPage.pageSize = pageSize;
    },
    //过站信息进行分页
    onStationInfoLoad(page, params = {}) {
      if (this.workOrderNo) {
        getOverStationInfo(page.currentPage, page.pageSize, Object.assign({ workOrderNo: this.workOrderNo, flag: false })).then((res) => {
          const data = res.data.data;
          this.stationPage.total = data.total;
          this.passingStationInfoData = data.records;
        });
      } else {
        this.passingStationInfoData = [];
      }
    },
    onDeliverGoodsInfoLoad(page, params = {}) {
      if (this.workOrderNo) {
        getDeliveryInfo(page.currentPage, page.pageSize, Object.assign({ workOrderNo: this.workOrderNo })).then((res) => {
          const data = res.data.data;
          this.deliverPage.total = data.total;
          this.deliverGoodsInfoData = data.records;
        });
      } else {
        this.deliverGoodsInfoData = [];
      }
    },
    deliverSizeChange(pageSize) {
      this.deliverPage.pageSize = pageSize;
    },
    deliverCurrentChange(currentPage) {
      this.deliverPage.currentPage = currentPage;
    },
    async onSubmit() {
      if (!this.workOrderNo) {
        this.$message({
          type: 'warning',
          message: '请选择工单号！'
        });
        return;
      }
      let workOrderDataInfo = await getWorkOrderList({ workOrderNo: this.workOrderNo });
      let workOrderData = this._get(workOrderDataInfo, 'data.data', null);
      workOrderData ? (this.workOrderInfoData = [].concat([workOrderData])) : (this.workOrderInfoData = []); //工单信息
      this.onStationInfoLoad(this.stationPage, {});
      this.onLoad(this.page, {}); //产品信息
      let pickingInfo = await getPickingListByWorkOrderNo(this.workOrderNo);
      this.pickingInfoData = this._get(pickingInfo, 'data.data', []); //领料信息
      this.onDeliverGoodsInfoLoad(this.deliverPage, {}); //发货信息
      let feedingInfo = await getFeedListByWorkOrderNo(this.workOrderInfoData[0].workOrderId);
      this.feedingInfoData = this._get(feedingInfo, 'data.data', []); //上料信息
      this.onSmtLoad(this.smtPage, {});
    },

    clear() {
      this.workOrderNo = '';
      this.workOrderInfoData = this.passingStationInfoData = this.productInfoData = this.pickingInfoData = this.deliverGoodsInfoData = this.feedingInfoData = [];
      this.$nextTick(() => {
        this.$refs.workOrderNoProperties.focus();
      });
    },

    /**
     * 打开工单号选择模态框
     */
    openWorkOrderNoModal() {
      this.modalName = 'workOrderModal';
      this.$refs.commonModalTemplate.showModal();
    },

    /**
     * 选择模态框行数据
     */
    getSelectedRows(rowData) {
      if (this.modalName === 'workOrderModal') {
        this.workOrderNo = rowData.orderNo;
        this.onSubmit();
      }
    },

    /**
     * 查看发货信息详情
     */
    deliverGoodsInfoDetail(row) {
      this.isShowDeliverGoodsInfoDetail = true;
      this.deliverGoodsInfoForm.sheetNo = row.no;
      this.deliverGoodsInfoForm.partner = row.partner;
      this.deliverGoodsInfoForm.consignor = row.consignor;
      this.deliverGoodsInfoForm.deliveryDate = row.deliveryDate;
      this.deliverGoodsList = row.details;
    },
    /**
     * 页面内定位表格
     */
    goToLocation(type) {
      switch (type) {
        case '#workOrderInfo':
          this.isShowWorkOrderInfo = true;
          break;
        case '#productInfo':
          this.isShowProductInfo = true;
          break;
        case '#pickingInfo':
          this.isShowPickingInfo = true;
          break;
        case '#feedingInfo':
          this.isShowFeedingInfo = true;
          break;
        case '#passingStationInfo':
          this.isShowPassingStationInfo = true;
          break;
        case '#deliverGoodsInfo':
          this.isShowDeliverGoodsInfo = true;
          break;
        case '#deliverGoodsInfo':
          this.isShowDeliverGoodsInfo = true;
          break;
        default:
          break;
      }
      $('#avue-view').animate(
        {
          scrollTop: $(type).offset().top + $('#avue-view').scrollTop() - 110
        },
        500
      );
    },
    toggleMenu(type) {
      this[type] = !this[type];
    }
  },
  created() {
    this.$nextTick(() => {
      this.$refs.workOrderNoProperties.focus();
    });
  }
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  align-items: center;
  height: 35px;
  .titleLeft {
    display: flex;
    align-items: center;
    .titleName {
      user-select: none;
      display: flex;
      align-items: center;
      cursor: pointer;
      .arrowRight {
        transform: rotate(0);
        transition: all 0.2s;
        &.arrowDown {
          transform: rotate(90deg);
          transition: all 0.2s;
        }
      }
    }
  }
  span {
    color: #0995bb;
  }
}
::v-deep .el-table {
  margin-bottom: 25px;
}
.box-card {
  position: absolute;
  top: 30%;
  right: 1%;
  width: 10%;
  min-width: 170px;
  height: 55%;
  z-index: 9999;

  .catalogue {
    user-select: none;
    ul {
      margin-left: -10px;
      li {
        list-style: disc;
        line-height: 25px;
        cursor: pointer;
      }
    }
  }
}

.box-card-hide {
  position: absolute;
  top: 30%;
  right: 1%;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  cursor: pointer;
  z-index: 9999;
}

.workOrderProgress-enter-active,
.workOrderProgress-leave-active {
  transition: opacity 0.2s;
}
.workOrderProgress-enter,
.workOrderProgress-leave-to {
  opacity: 0;
}
::v-deep .is-never-shadow {
  padding: 0;
}
::v-deep .el-card__body {
  padding: 20px;
}
::v-deep .avue-crud--card {
  .el-card__body {
    padding: 0;
  }
}
</style>
